<script>
/**
 * 柱状图
 * showTooltip {true | flase} 是否显示tooltip
 * tooltip {Object} tooltip配置
 * legend {Array} 图例
 * title {String} 标题
 * grid {Object} grid配置
 * xAxis {Object} x轴配置
 * yAxis {Object} y轴配置
 * series {Array} 整体配置数据
 *
 */
import * as echarts from "echarts";
import dingtheme from "../theme/dingTheme.json"
import macarons from "../theme/macarons.json"

export default {
  name: 'bar-charts',

  props: {
    showTooltip: {
      type: Boolean,
      default: () => {
        return true
      }
    },

    tooltip: {
      type: Object,
      default: () => {
        return {
          trigger: 'axis', axisPointer: {type: 'shadow'}
        }
      },
    },
    legend: {
      type: Array,
      default: () => {
        return []
      }
    },
    title: {
      type: String,
      default: () => {
        return ''
      }
    },

    grid: {
      type: Object,
      default: () => {
        return {left: '3%', right: '8%', bottom: '3%', containLabel: true,}
      }
    },

    xAxis: {
      type: Object,
      default: () => {
        return {type: 'category', boundaryGap: false,}
      }
    },

    yAxis: {
      type: Object,
      default: () => {
        return {type: 'value'}
      }
    },


    series: {
      type: Array,
      default: () => {
        return []
      }
    },
  },

  data() {
    return {}
  },
  methods: {
    init() {
      echarts.registerTheme('dingtheme', dingtheme.theme)
      echarts.registerTheme('macarons', macarons.theme)
      this.$refs.barChart.init(echarts, 'dingtheme', (chart) => {
        chart.setOption(this.creatOptions())
        this.$emit('finished')
      })
    },

    creatOptions() {
      let tooltip = {
        show: this.showTooltip,
        ...this.tooltip
      }
      tooltip.confine = true
      let title = {text: this.title}
      let grid = this.grid
      return {
        title,
        tooltip: tooltip,
        grid,
        legend: this.legend,
        xAxis:this.xAxis,
        yAxis: this.yAxis,
        series: this.series,
      }
    },

    refreshOptions() {
      this.$refs.barChart.setOption(this.creatOptions())
    }

  },
}


</script>

<template>
  <view class="line-chart">
    <l-echart ref="barChart" @finished="init"/>
  </view>
</template>

<style scoped lang="scss">
.line-chart {
  color: #000000;
}

</style>